//
//  MainPage.swift
//  SwiftuiZsa
//
//  Created by hccc on 2023/11/16.
//

import SwiftUI
typealias TabActionCallback = (SideItemType) -> ()

struct MainPage: View {
    @StateObject var logic: MainTabLogic = MainTabLogic()
    @StateObject var router = Router()
    
    private var navigationTitle: String {
        get {
            switch logic.selectedTab {
            case .about, .help:
                return logic.selectedTab.rawValue.capitalized
            case .security:
                return "Account Security"
            default:
                return ""
            }
        }
    }
    
    init() {
        WCDBManager.shared.createDatabase()
        CaseDBManager.shared.createDBTables()
    }
    
    var body: some View {
        NavigationStack(path: $router.path) {
            mainView()
                .setCustomNav(title: navigationTitle)
            .withAppRouter()
        }
        .environmentObject(router)
        
    }
    
    func mainView() -> some View {
        ZStack  {
            Theme.color.primaryBackgroundColor
                .ignoresSafeArea()
            //Side Menu....
            ScrollView(Screen.height < 750 ? .vertical : .init(), showsIndicators: false) {
                SideBarMenu(selectTab: $logic.selectedTab) { type in
                    withAnimation(.spring()){
                        logic.showMenu.toggle()
                    }
                }
            }
            ZStack {
                // two background Cards...
                Color.white
                    .opacity(0.5)
                    .cornerRadius(logic.showMenu ? 15 : 0)
                    .shadow(color: Color.black.opacity(0.07), radius: 5, x: -5, y: 0)
                    .offset(x: logic.showMenu ? -25 : 0)
                    .padding(.vertical, 30)
                
                Color.white
                    .opacity(0.4)
                    .cornerRadius(logic.showMenu ? 15 : 0)
                    .shadow(color: Color.black.opacity(0.07), radius: 5, x: -5, y: 0)
                    .offset(x: logic.showMenu ? -50 : 0)
                    .padding(.vertical, 60)
                Home(selectedTab: $logic.selectedTab)
                    .background(Color.red)
                    .cornerRadius(logic.showMenu ? 15 : 0)
            }
            .scaleEffect(logic.showMenu ? 0.84 : 1)
            .offset(x: logic.showMenu ?  Screen.width - 120 : 0)
            .ignoresSafeArea()
            .overlay(alignment: .topLeading) {
                Button(action: {
                    withAnimation(.spring()){
                        logic.showMenu.toggle()
                    }
                }, label: {
                    // Animted Drawer Button...
                    VStack (spacing: 5){
                        Capsule()
                            .fill(logic.showMenu ? Color.white : Theme.color.primaryBackgroundColor)
                            .frame(width: 30, height: 3)
                            .rotationEffect(.init(degrees: logic.showMenu ? -50 : 0))
                            .offset(x: logic.showMenu ? 2 : 0, y: logic.showMenu ? 9 : 0)
                        VStack (spacing:5) {
                            Capsule()
                                .fill(logic.showMenu ? Color.white : Theme.color.primaryBackgroundColor)
                                .frame(width: 30, height: 3)
                            Capsule()
                                .fill(logic.showMenu ? Color.white : Theme.color.primaryBackgroundColor)
                                .frame(width: 30, height: 3)
                                .offset(y: logic.showMenu ? -8 : 0)
                        }
                        .rotationEffect(.init(degrees: logic.showMenu ? 50 : 0))
                    }
                })
                .offset(CGSize(width: 15.0, height: 0))
                .padding()
            }
        }
    }
}

#Preview {
    MainPage()
}
